<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style lang="css">
    @import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url(https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg);
      background-size: cover;
    }

    p {
      margin: 0em 5em 4em 5em;
    }

    .glowIn {
      text-align: left;
      line-height: 1.8;
      color: white;
      font-family: Lora, serif;
    }

    .glowIn span {
      animation: glowIn 0.8s ease both;
    }

    @keyframes glowIn {
      from {
        opacity: 0;
      }

      65% {
        opacity: 1;
        text-shadow: 0 0 25px white;
      }

      75% {
        opacity: 1;
      }

      to {
        opacity: 0.7;
      }
    }
  </style>
</head>

<body>
  <h1 class="glowIn">Hello World</h1>
  <p class="glowIn">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Mattis pellentesque id nibh tortor. Suspendisse ultrices gravida dictum fusce ut placerat
    orci nulla. A lacus vestibulum sed arcu.</p>
</body>
<script>
  var glowInTexts = document.querySelectorAll(".glowIn");
  glowInTexts.forEach(function (glowInText)
  {
    var letters = glowInText.textContent.split("");
    glowInText.textContent = "";
    letters.forEach(function (letter, i)
    {
      var span = document.createElement("span");
      span.textContent = letter;
      span.style.animationDelay = i * 0.05 + "s";
      glowInText.append(span);
    });
  });
</script>

</html>